<template>
  <div style="background: #f8f7f7;
              position: fixed;
              height: 100%;
              width: 100%;">
    <div class="register_box 文本框-宽" style="background: #ffffff;">
      <!--登陆表单-->
      <el-form label-width="0px" class="login_form" :model="registerForm" :rules="registerFormRules" >
        <el-form-item>
          <el-input placeholder="请设置你的昵称" v-model="editNicknameArgs.nickname"></el-input>
        </el-form-item>
        <el-form-item prop="username">
          <el-input placeholder="请输入你的手机号" v-model="queryByPhoneNumber.phoneNumber">
            <template slot="prepend">+86</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="space-between">
            <el-col :span="18">
              <el-input placeholder="请输入验证码" v-model="verificationCode"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button type="text" @click="getVerificationCode">获取验证码</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input placeholder="请设置你的密码" v-model="registerForm.password" prefix-icon="el-icon-lock" type="password">
          </el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input placeholder="请再次输入并确认密码" v-model="passwordConfirm" prefix-icon="el-icon-lock" type="password">
          </el-input>
        </el-form-item>
      </el-form>

      <el-row type="flex" justify="end">
        <el-button type="danger" size="220" @click="register">注册</el-button>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="text" style='height:10px;' @click="toLogin">已有账号？点击登录</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      passwordConfirm:"",
      agreement: false,
      verificationCode:'',
      verificationCodeConfirm:'',
      phoneNumberConfirm: "",
      registerDialogVisible:false,
      registerForm:{
        phoneNumber: 0,
        password: '',
        register: '127.0.0.1'
      },
      queryByPhoneNumber:{
        phoneNumber:""
      },
      editNicknameArgs:{
        idUser: 0,
        nickname: "",
      },
      registerFormRules:{
        username:[
          {min:11, max:11, message: "请输入正确的手机号", trigger:"blur"}
        ],
        password:[
          {min:6, max:15, message: "密码长度为6到15个字符", trigger:"blur"}
        ]
      }
    };
  },
  methods: {
    toLogin(){
      this.$router.push("/Login");
    },
    async getVerificationCode(){
      const {data: res} = await this.$http.get('http://39.102.77.65:8081/user/code', {
        params:this.queryByPhoneNumber
      })
      this.verificationCodeConfirm = res.code
      this.phoneNumberConfirm=this.queryByPhoneNumber.phoneNumber
    },
    async register() {
      if(this.registerForm.password != this.passwordConfirm) {
        this.$message.error('两次密码不一致！');
      }
      else if(this.verificationCode != this.verificationCodeConfirm) {
        this.$message.error('验证码错误！');
      }
      else if(this.phoneNumberConfirm != this.queryByPhoneNumber.phoneNumber) {
        this.$message.error('验证码错误！');
      }
      else if(this.editNicknameArgs.nickname == "") {
        this.$message.error('用户昵称不能为空！');
      }
      else {
        this.registerForm.phoneNumber=parseInt(this.queryByPhoneNumber.phoneNumber)
        const {data: res} = await this.$http.post('http://39.102.77.65:8081/user/register', this.registerForm);
        if(res.msg == '注册成功'){
          this.$message({
            message: '注册成功！',
            type: 'success'
          });
          this.editNicknameArgs.idUser = res.user.idUser
          await this.$http.put("http://39.102.76.217:8082/user/editnickname", this.editNicknameArgs);
          this.$router.push("/Login");
        }
        else{
          this.$message.error('该账号已存在！');
        }
      }
    },
  }
}
</script>

<style>

.register_box{
  width: 400px;
  height: 380px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.文本框-宽 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 30px;
  margin-bottom: 16px;
  margin-top: 16px;
}

</style>
